<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import { Search } from '@element-plus/icons-vue';

// 表格加载状态
const loading = ref(false);

// 商机表格数据
const tableData = ref([]);

// 分页
const currentPage = ref(1);
const pageSize = ref(10);
const total = ref(0);

// 搜索条件
const searchForm = reactive({
  keyword: '',
  status: '',
  source: '',
  type: '',
});

// 状态选项
const statusOptions = [
  { label: '全部', value: '' },
  { label: '未跟进', value: '0' },
  { label: '跟进中', value: '1' },
  { label: '已成交', value: '2' },
  { label: '已失效', value: '3' }
];

// 来源选项
const sourceOptions = [
  { label: '全部', value: '' },
  { label: '电话咨询', value: '1' },
  { label: '网站注册', value: '2' },
  { label: '门店来访', value: '3' },
  { label: '老客户介绍', value: '4' },
  { label: '合作伙伴', value: '5' },
  { label: '其他渠道', value: '6' }
];

// 类型选项
const typeOptions = [
  { label: '全部', value: '' },
  { label: '房产抵押', value: '1' },
  { label: '车辆抵押', value: '2' },
  { label: '信用贷款', value: '3' },
  { label: '其他类型', value: '4' }
];

// 模拟数据
const mockData = [
  {
    id: '1',
    customerName: '张三',
    customerPhone: '13812345678',
    source: '1',
    type: '1',
    title: '北京市朝阳区住宅抵押贷款',
    description: '客户有一套朝阳区的住宅，面积120平米，预估价值600万，需要抵押贷款200万',
    status: '0',
    createTime: '2024-04-01 10:25:36',
    followTime: '',
    followCount: 0,
    assignee: ''
  },
  {
    id: '2',
    customerName: '李四',
    customerPhone: '13987654321',
    source: '2',
    type: '3',
    title: '个人信用贷款50万',
    description: '客户是某银行高管，年收入50万以上，信用良好，需要50万信用贷款',
    status: '1',
    createTime: '2024-04-02 14:30:22',
    followTime: '2024-04-03 09:15:30',
    followCount: 2,
    assignee: '王业务'
  },
  {
    id: '3',
    customerName: '王五',
    customerPhone: '13512345678',
    source: '4',
    type: '2',
    title: '奔驰车抵押贷款',
    description: '客户有一辆奔驰车，购买两年，预计价值30万，需要抵押贷款15万',
    status: '2',
    createTime: '2024-04-03 16:45:10',
    followTime: '2024-04-06 11:30:45',
    followCount: 3,
    assignee: '赵业务'
  },
  {
    id: '4',
    customerName: '赵六',
    customerPhone: '13612345678',
    source: '3',
    type: '1',
    title: '商铺抵押贷款申请',
    description: '客户在某商圈有一个商铺，面积60平米，估值300万，需要抵押贷款150万用于经营周转',
    status: '3',
    createTime: '2024-04-05 09:20:15',
    followTime: '2024-04-07 14:25:30',
    followCount: 1,
    assignee: '张业务'
  }
];

// 初始化数据
onMounted(() => {
  fetchData();
});

// 获取数据
const fetchData = () => {
  loading.value = true;
  setTimeout(() => {
    // 筛选商机数据
    let filteredData = [...mockData];

    // 关键词筛选
    if (searchForm.keyword) {
      filteredData = filteredData.filter(item =>
        item.customerName.includes(searchForm.keyword) ||
        item.customerPhone.includes(searchForm.keyword) ||
        item.title.includes(searchForm.keyword) ||
        item.description.includes(searchForm.keyword)
      );
    }

    // 状态筛选
    if (searchForm.status) {
      filteredData = filteredData.filter(item =>
        item.status === searchForm.status
      );
    }

    // 来源筛选
    if (searchForm.source) {
      filteredData = filteredData.filter(item =>
        item.source === searchForm.source
      );
    }

    // 类型筛选
    if (searchForm.type) {
      filteredData = filteredData.filter(item =>
        item.type === searchForm.type
      );
    }

    tableData.value = filteredData;
    total.value = filteredData.length;

    loading.value = false;
  }, 300);
};

// 处理搜索
const handleSearch = () => {
  currentPage.value = 1;
  fetchData();
};

// 重置搜索
const resetSearch = () => {
  searchForm.keyword = '';
  searchForm.status = '';
  searchForm.source = '';
  searchForm.type = '';
  currentPage.value = 1;
  fetchData();
};

// 处理分页变化
const handlePageChange = (page) => {
  currentPage.value = page;
  fetchData();
};

// 处理每页数量变化
const handleSizeChange = (size) => {
  pageSize.value = size;
  currentPage.value = 1;
  fetchData();
};

// 格式化状态
const formatStatus = (row) => {
  switch (row.status) {
    case '0':
      return '未跟进';
    case '1':
      return '跟进中';
    case '2':
      return '已成交';
    case '3':
      return '已失效';
    default:
      return '未知状态';
  }
};

// 获取状态标签类型
const getStatusType = (status) => {
  switch (status) {
    case '0':
      return 'info';
    case '1':
      return 'warning';
    case '2':
      return 'success';
    case '3':
      return 'danger';
    default:
      return 'info';
  }
};

// 格式化来源
const formatSource = (row) => {
  const source = sourceOptions.find(item => item.value === row.source);
  return source ? source.label : '未知来源';
};

// 格式化类型
const formatType = (row) => {
  const type = typeOptions.find(item => item.value === row.type);
  return type ? type.label : '未知类型';
};
</script>

<template>
  <div class="opportunity-container">
    <!-- 搜索表单 -->
    <el-card shadow="never" class="filter-card">
      <el-form :inline="true" :model="searchForm" class="filter-form">
        <el-form-item>
          <el-input v-model="searchForm.keyword" placeholder="客户姓名/手机号/标题/描述" clearable @keyup.enter="handleSearch"
            style="width: 240px">
            <template #prefix>
              <el-icon>
                <Search />
              </el-icon>
            </template>
          </el-input>
        </el-form-item>

        <el-form-item>
          <el-select v-model="searchForm.status" placeholder="商机状态" clearable style="width: 120px">
            <el-option v-for="item in statusOptions" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </el-form-item>

        <el-form-item>
          <el-select v-model="searchForm.source" placeholder="商机来源" clearable style="width: 140px">
            <el-option v-for="item in sourceOptions" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </el-form-item>

        <el-form-item>
          <el-select v-model="searchForm.type" placeholder="商机类型" clearable style="width: 140px">
            <el-option v-for="item in typeOptions" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="handleSearch">查询</el-button>
          <el-button @click="resetSearch">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <!-- 内容区域 -->
    <el-card shadow="never" class="content-card">
      <template #header>
        <div class="card-header">
          <span>商机列表</span>
        </div>
      </template>

      <el-table :data="tableData" style="width: 100%" v-loading="loading" border
        :header-cell-style="{ background: '#f5f7fa' }">
        <el-table-column type="index" label="序号" width="60" align="center" />
        <el-table-column prop="title" label="商机标题" min-width="180" show-overflow-tooltip />
        <el-table-column prop="customerName" label="客户姓名" width="100" align="center" />
        <el-table-column prop="customerPhone" label="联系电话" width="120" align="center" />
        <el-table-column label="商机来源" width="110" align="center">
          <template #default="scope">
            {{ formatSource(scope.row) }}
          </template>
        </el-table-column>
        <el-table-column label="商机类型" width="110" align="center">
          <template #default="scope">
            {{ formatType(scope.row) }}
          </template>
        </el-table-column>
        <el-table-column prop="description" label="商机描述" min-width="180" show-overflow-tooltip />
        <el-table-column label="商机状态" width="100" align="center">
          <template #default="scope">
            <el-tag :type="getStatusType(scope.row.status)">
              {{ formatStatus(scope.row) }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="createTime" label="创建时间" width="160" align="center" />
        <el-table-column prop="assignee" label="负责人" width="100" align="center">
          <template #default="scope">
            {{ scope.row.assignee || '未分配' }}
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <div class="pagination-container">
        <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize" :page-sizes="[10, 20, 50, 100]"
          background layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="handleSizeChange"
          @current-change="handlePageChange" />
      </div>
    </el-card>
  </div>
</template>

<style scoped>
.opportunity-container .filter-card {
  margin-bottom: 20px;
}

.opportunity-container .filter-form {
  display: flex;
  flex-wrap: wrap;
}

.opportunity-container .filter-form .el-form-item:last-child {
  margin-left: auto;
}

.opportunity-container .content-card {
  margin-top: 20px;
}

.opportunity-container .card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.opportunity-container .pagination-container {
  margin-top: 20px;
  display: flex;
  justify-content: center;
}
</style>